<template>
  <el-popover
    v-model="visible"
    placement="bottom"
    :width="width"
    trigger="click"
    :disabled="disabled"
  >
    <template #reference>
      <span
        class="svg-container"
        :class="disabled ? 'button-disabled' : 'button-primary'"
      >
        <svg-icon icon-class="funnel" /> </span
    ></template>
    <div class="popover-setting">
      <h2
        class="mb-3 mt-2"
        style="width: 100%; font-size: 1.2em; text-align: center"
      >
        {{ $t('common.conditions_filter') }}
      </h2>

      <div v-if="dateFilter" class="filter-title flex justify-between">
        <span>{{ $t('page.unit') }}: </span>
        <div class="set-value">
          <template>
            <el-radio
              v-for="obj in dateFilterData"
              :key="obj.value"
              v-model="config.dateUnit"
              :label="obj.value"
              @change="changeDateUnit"
            >
              {{ obj.label }}</el-radio
            >
          </template>
        </div>
      </div>

      <div v-if="dateFilter" class="filter-title flex justify-between">
        <span>{{ $t('common.range') }}: </span>
        <div class="set-value">
          <template>
            <el-radio
              v-for="range in getDateRange(config.dateUnit)"
              :key="range"
              v-model="config.dateRange"
              :label="range"
              >{{ range }}
              {{
                config.dateUnit === 'Month'
                  ? $t('common.month')
                  : $t('common.day')
              }}</el-radio
            >
          </template>
        </div>
      </div>

      <div v-if="modelFilter" class="filter-title flex justify-between">
        <span>{{ $t('common.models_data') }}: </span>
        <div class="set-value">
          <template>
            <el-checkbox v-model="config.allModels" :label="'All'"
              ><span>{{ $t('common.all') }}</span></el-checkbox
            >
          </template>
        </div>
      </div>

      <el-checkbox-group
        v-if="modelFilter && !config.allModels"
        v-model="configModels"
        style="height: 300px; overflow-y: auto"
      >
        <div
          v-for="model in modelList"
          :key="model.modelCode"
          class="list-group-item"
        >
          <span
            ><el-checkbox :label="model.modelCode">{{
              model.modelName
            }}</el-checkbox></span
          >
        </div>
      </el-checkbox-group>
      <div class="mt-3 text-right">
        <el-button
           
          size="small"
          type="primary"
          @click="returnConfig()"
          >{{ $t('common.confirm') }}</el-button
        >
      </div>
    </div>
  </el-popover>
</template>

<script>
// import { getDomainValue, setDomainValue } from './local-storage-util'
// import {
//   selectAllModel
// } from '@/api/datacenter'

import { getOperatorAllModels } from '@/api/operator'

export default {
  name: 'ChartDataFilter',
  props: {
    width: {
      type: Number,
      default: 450
    },
    dateFilter: {
      type: Boolean,
      default: false
    },
    modelFilter: {
      type: Boolean,
      default: false
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      operatorId: this.$route.params.operatorId,
      visible: false,
      config: {
        dateUnit: 'Month',
        dateRange: 6,
        allModels: true,
        models: []
      },
      modelList: [],
      // defaultConfig: {
      //   dateUnit: 'Day',
      //   dateRange: 7,
      //   allModels: true,
      //   models: [],
      // }
      configModels: []
    }
  },
  computed: {
    dateFilterData() {
      return [
        {
          label: this.$t('common.day'),
          value: 'Day',
          range: [7, 14]
        },
        {
          label: this.$t('common.month'),
          value: 'Month',
          range: [3, 6, 12]
        }
      ]
    }
  },
  mounted() {
    this.getOperatorAllModels()
  },
  methods: {
    init(defaultConfig) {
      if (defaultConfig.models && defaultConfig.models.length > 0) {
        this.modelList = defaultConfig.models
      } else {
        this.modelList = []
      }
      this.config.dateUnit = defaultConfig.dateUnit
      this.config.dateRange = defaultConfig.dateRange
      this.config.allModels = defaultConfig.allModels
    },
    changeDateUnit(dateUnit) {
      console.log(dateUnit)
      if (dateUnit === 'Day') {
        this.config.dateRange = 7
      } else if (dateUnit === 'Month') {
        this.config.dateRange = 6
      } else {
        this.config.dateRange = undefined
      }
    },
    returnConfig() {
      if (this.dateFilter) {
        if (!this.config.dateUnit) {
          this.$message({
            message: '$t{common.message.please_choose_date_unit}',
            type: 'error'
          })
          // alert('请选择日期单位(改用标准的弹出错误框）')
          return
        }
        if (!this.config.dateRange) {
          this.$message({
            message: '$t{common.message.please_choose_date_range}',
            type: 'error'
          })
          return
        }
      }
      if (this.modelFilter) {
        if (!this.config.allModels && this.configModels.length < 1) {
          this.$message({
            message: this.$t('common.message.please_choose_a_model'),
            type: 'error'
          })
          return
        }
        this.config.models = this.configModels
      }
      this.$emit('confirm', this.config)
      this.visible = false
    },
    getDateRange(dateUnit) {
      if (dateUnit === undefined) {
        return []
      }
      for (let i = 0; i < this.dateFilterData.length; i++) {
        if (this.dateFilterData[i].value === dateUnit) {
          return this.dateFilterData[i].range
        }
      }
      return []
    },
    getOperatorAllModels() {
      getOperatorAllModels({
        operatorId: this.operatorId
      })
        .then((res) => {
          this.init({
            dateUnit: 'Month',
            dateRange: 6,
            allModels: true,
            models: res
          })
        })
        .catch(this.$confirmError)
    }
  }
}
</script>
<style scoped lang="scss">
.filter-title {
  padding: 12px 5px;
  border-bottom: 1px solid #edf2f9;
  font-weight: 500;
}
.el-checkbox-group {
  padding: 0px;
  .list-group-item {
    padding: 8px 10px;
    border-bottom: 1px solid #edf2f9;
    /*&:last-of-type  {*/
    /*border-bottom: 0px;*/
    /*}*/
    &:hover {
      background-color: #edf2f9;
    }
  }
}
</style>
